// propertySheet.js

function createText( data, prop )
{
	obj = jQuery( "<input>", {
		"value" : prop.value,
		keyup : function(){
			prop.value = jQuery(this).val();							// input value
			jQuery( data.elementData ).val( JSON.stringify(data.sections) );
		}
	}); 
	
	return obj;
}

function createTextArea( data, prop )
{
	obj = jQuery( "<textarea>", {
		"value" : prop.value,
		keyup : function(){
			prop.value = jQuery(this).val();							// input value
			jQuery( data.elementData ).val( JSON.stringify(data.sections) );
		}
	});
	
	return obj;
}

jQuery.fn.propertySheet = function( data ){

	tmp = this;

	// zero the content for the div container
	this.empty();

	if ( data.elementData!=undefined )
	{
		if ( data.elementData instanceof jQuery )
			elementData = data.elementData;
		else
			elementData = jQuery( data.elementData );
			
		// there is a html element, we use the data from the element instead of the data.sections
		data.sections = JSON.parse( elementData.val() );
		elementData.val( JSON.stringify(data.sections) );
	}
	
	jQuery.each( data.sections, function(sectionTitle,v){

		console.log( v );
		
		table = jQuery( "<table class='spPropertySheetTable'/>" );
		jQuery( "<tr><td colspan='2'><h1>"+sectionTitle+"</h1></td></tr>" ).appendTo( table );
		
		jQuery.each( v, function( propTitle, vv ){
		
			type = vv.type;

			tr = jQuery( "<tr/>" ).appendTo( table );
			td1 = jQuery( "<td/>" ).appendTo( tr );
			td2 = jQuery( "<td/>" ).appendTo( tr );

			td1.append( propTitle );
					
			switch ( type )
			{
				case "text":
					createText( data, vv ).appendTo( td2 );
					break;
					
				case "textarea":
					createTextArea( data, vv ).appendTo( td2 );
					break;
			}
		});	
		
		tmp.append( table );
	});
};

jQuery(document).ready(function(){

	last_selected = undefined;
	last_selected_background_color = undefined;
	
	////////////////////////////////////////////////////////////////
	// spDeleteContainer
	////////////////////////////////////////////////////////////////
	
	jQuery( ".spPropertySheet" ).on( "click", function(e) {

		classHit = e.target.className;
		if ( classHit=="spDeleteContainer" )
		{
			jQuery(e.target).parent().remove();
			jQuery( ".propertySheet2" ).empty();		
			return;
		}

		// components drag list has the title hidden, we should ignore clicks on this
		containerTitle = jQuery(this).find(".compContainerTitle");
		if ( containerTitle.css( "display" )=="none" )
			return;
	
		// restore last select div's background color
		if ( last_selected!=undefined )
			last_selected.css( "background-color", last_selected_background_color );
			
		// highlight selected div
		last_selected = jQuery(this);
		last_selected_background_color = jQuery(this).css( "background-color" );
		jQuery(this).css( "background-color", "#e0e0e0" );
						
		// find the element that contains the json data
		data = jQuery(this).find( ".spPropertySheetDataInput" );
		
		jQuery( ".propertySheet2" ).propertySheet({
			"elementData" : data
		});
	});	
	
});

